/**
 * vue3 全局钩子函数
 * 约定: 函数命名以use开头+功能 => useXxx
 */
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
 *
 * @param {*} apiFn 进入可视区 调用方法
 */
export function useDataLazy (apiFn) {
  // 监控元素是否进入可视区
  // 1. 定义ref对象  获取要监控的元素或组件
  const target = ref()
  // 2. 借助useIntersectionObserver执行监控
  const { stop } = useIntersectionObserver(
    target, // 指定要监控的元素或组件
    ([{ isIntersecting }]) => {
      /**
         * 实现数据懒加载
         * 1. 通过参数isIntersecting => true 进入可视区 | isIntersecting => false 离开可视区
         * 2. 在isIntersecting = true 发请求获取数据并渲染
         */
      if (isIntersecting) {
        apiFn()
        // 第一次进入可视区 发送一次请求 关闭监控
        stop()
      }
    },
    { threshold: 0 }
  )
  return { target }
}
